/**
 * 主题切换 Composable
 * @description 提供主题相关的响应式状态和方法
 */

import { storeToRefs } from 'pinia'
import { useThemeStore } from '@/store/theme'
import type { ThemeKey, ThemeConfig } from '@/config/theme.config'

export function useTheme() {
    const themeStore = useThemeStore()

    // 使用 storeToRefs 获取解包后的响应式状态，避免出现 Ref<Ref<T>> 的情况
    const { currentTheme, currentThemeConfig, availableThemes, isDarkTheme, isTransitioning } = storeToRefs(themeStore)

    // 主题切换方法
    const switchTheme = (themeKey: ThemeKey) => {
        return themeStore.switchTheme(themeKey)
    }

    // 获取主题配置
    const getThemeConfig = (themeKey?: ThemeKey): ThemeConfig => {
        return themeStore.getThemeConfig(themeKey)
    }

    // 重置主题
    const resetTheme = () => {
        return themeStore.resetTheme()
    }

    // 初始化主题
    const initTheme = () => {
        return themeStore.initTheme()
    }

    // 获取主题CSS变量
    const getThemeVars = (themeKey?: ThemeKey) => {
        const config = getThemeConfig(themeKey)
        return {
            '--theme-primary': config.primary,
            '--theme-secondary': config.secondary,
            '--theme-accent': config.accent,
            '--theme-gradient': config.gradient,
            '--theme-background': config.background,
            '--theme-surface': config.surface,
            '--theme-text-primary': config.text.primary,
            '--theme-text-secondary': config.text.secondary,
            '--theme-text-tertiary': config.text.tertiary,
            '--theme-border': config.border,
            '--theme-shadow': config.shadow
        }
    }

    // 获取主题类名
    const getThemeClass = (themeKey?: ThemeKey) => {
        return `theme-${themeKey || currentTheme.value}`
    }

    // 检查是否为指定主题
    const isTheme = (themeKey: ThemeKey) => {
        return currentTheme.value === themeKey
    }

    // 获取下一个主题
    const getNextTheme = (): ThemeKey => {
        const themes = availableThemes.value
        const currentIndex = themes.findIndex((theme) => theme.key === currentTheme.value)
        const nextIndex = (currentIndex + 1) % themes.length
        return themes[nextIndex].key
    }

    // 获取上一个主题
    const getPrevTheme = (): ThemeKey => {
        const themes = availableThemes.value
        const currentIndex = themes.findIndex((theme) => theme.key === currentTheme.value)
        const prevIndex = currentIndex === 0 ? themes.length - 1 : currentIndex - 1
        return themes[prevIndex].key
    }

    // 切换到下一个主题
    const switchToNextTheme = () => {
        const nextTheme = getNextTheme()
        return switchTheme(nextTheme)
    }

    // 切换到上一个主题
    const switchToPrevTheme = () => {
        const prevTheme = getPrevTheme()
        return switchTheme(prevTheme)
    }

    return {
        // 响应式状态
        currentTheme,
        currentThemeConfig,
        availableThemes,
        isDarkTheme,
        isTransitioning,

        // 主题操作方法
        switchTheme,
        resetTheme,
        initTheme,

        // 工具方法
        getThemeConfig,
        getThemeVars,
        getThemeClass,
        isTheme,
        getNextTheme,
        getPrevTheme,
        switchToNextTheme,
        switchToPrevTheme
    }
}

// 导出类型
export type UseThemeReturn = ReturnType<typeof useTheme>
